<template>
    <div class="review-container">
      <h2>评价订单</h2>
      <div v-if="orders.length">
        <div v-for="order in orders" :key="order.id" class="order">
          <p>订单号: {{ order.id }}</p>
          <div class="products">
            <div v-for="product in order.products" :key="product.id" class="product">
              <img :src="product.image" alt="Product Image" class="product-image">
              <div class="product-details">
                <p class="product-name">{{ product.name }}</p>
                <p class="product-price">价格: ¥{{ product.price }}</p>
                <p class="product-quantity">购买数量: {{ product.orderQuantity }}</p>
                <textarea v-if="!product.reviewed" v-model="product.review" placeholder="写下你的评价..." class="review-textarea"></textarea>
                <p v-else class="review-text">我的评论：{{ product.review }}</p>
                <el-button v-if="!product.reviewed" type="primary" @click="submitReview(order.id, product.id, product.review)">提交评价</el-button>
                <el-button v-else type="primary" @click="editReview(product)">修改评价</el-button>
              </div>
            </div>
          </div>
          <p>总金额: ¥{{ order.totalAmount }}</p>
        </div>
      </div>
      <div v-else>
        <p>没有已完成的订单可供评价。</p>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        orders: [],
        username:this.$globalState.username,
      }
    },
    created() {
      this.fetchCompletedOrders();
    },
    methods: {
      fetchCompletedOrders() {
        axios.get('http://localhost:8080/api/orders')
          .then(response => {
            const username = this.$globalState.username;
            this.orders = response.data.filter(order => order.status === '已完成'&& order.username === username);
            this.orders.forEach(order => {
              order.products = order.products || [];
              order.products.forEach(product => {
                product.review = product.review || ''; // 初始化每个产品的 review 属性
                product.reviewed = product.review !== ''; // 标识是否已评论
              });
            });
          })
          .catch(error => {
            console.error("There was an error fetching the orders!", error);
          });
      },
      submitReview(orderId, productId, review) {
        if (!review) {
          alert('请填写评价内容后再提交');
          return;
        }
        
        axios.post(`http://localhost:8080/api/orders/${orderId}/reviews/${productId}`, { review ,username: this.username})
          .then(response => {
            alert("评价提交成功!");
            this.updateProductReview(orderId, productId, review);
          })
          .catch(error => {
            console.error("There was an error submitting the review!", error);
            alert("提交评价时发生错误，请稍后再试。");
          });
      },
      updateProductReview(orderId, productId, review) {
        const order = this.orders.find(o => o.id === orderId);
          if (order) {
             const product = order.products.find(p => p.id === productId);
              if (product) {
                product.review = review;
                 product.reviewed = true;
              }   
          }
      },
      editReview(product) {
        product.reviewed = false;
      }
    }
  }
  </script>
  
  <style scoped>
  .review-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f4f7;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  h2 {
    font-size: 2em;
    text-align: center;
    text-shadow: 5px 5px 5px #0e42ff;
  }
  
  .order {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
  }
  
  .products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .product {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    width: calc(50% - 20px);
    background-color: #fff;
  }
  
  .product-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 20px;
    border-radius: 10px;
  }
  
  .product-details {
    flex: 1;
  }
  
  .product-name {
    font-size: 16px;
    font-weight: bold;
  }
  
  .product-price,
  .product-quantity {
    font-size: 14px;
    color: #555;
  }
  
  .review-textarea {
    width: 100%;
    height: 100px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 14px;
  }
  
  .el-button {
    margin-top: 10px;
  }
  </style>